import React, { Component } from 'react';
//导入标签栏
import { TabBar } from 'antd-mobile';
///导入icon
import cookbook1 from '../../assets/imgs/cookbook.png';
import cookbook2 from '../../assets/imgs/cookbook-active.png';
// import location1 from '../../assets/imgs/location.png'
// import location2 from '../../assets/imgs/location-active.png'
import menu1 from '../../assets/imgs/menu.png'
import menu2 from '../../assets/imgs/menu-active.png'
import more1 from '../../assets/imgs/more.png'
import more2 from '../../assets/imgs/more-active.png'

//导入组件
import Cookbook from '@/view/cookbook'

class index extends Component {

  state = {
    selectedTab: 'cookbook',
    hidden: false,
  };

  renderContent(pageText) { 
    return <div>内容-{ pageText}</div>
  }
  render() {
    return (
      <div style={{ position: 'fixed', height: 'calc(100% - 40px)', width: '100%', top: 40 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#000"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="食谱大全"
            key="cookbook"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${cookbook1}) center center /  21px 21px no-repeat` }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${cookbook2}) center center /  21px 21px no-repeat` }}
            />
            }
            selected={this.state.selectedTab === 'cookbook'}
            // badge={1}
            onPress={() => {
              this.setState({
                selectedTab: 'cookbook',
              });
            }}
            data-seed="logId"
          >
            {/* {this.renderContent('cookbook')} */}
            <Cookbook />
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${menu1}) center center /  21px 21px no-repeat` }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${menu2}) center center /  21px 21px no-repeat` }}
              />
            }
            title="分类"
            key="menu"
            // badge={'new'}
            selected={this.state.selectedTab === 'menu'}
            onPress={() => {
              this.setState({
                selectedTab: 'menu',
              });
            }}
            data-seed="logId1"
          >
            {this.renderContent('menu')}
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${more1}) center center /  21px 21px no-repeat` }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${more2}) center center /  21px 21px no-repeat` }}
              />
            }
            title="更多"
            key="more"
            // dot
            selected={this.state.selectedTab === 'more'}
            onPress={() => {
              this.setState({
                selectedTab: 'more',
              });
            }}
          >
            {this.renderContent('more')}
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}

export default index;
